<template>
   <div>
        <div class="btns">
		   <el-button type="primary" plain  @click="add">添加家庭成员</el-button>
        </div>
        <el-table :data="poorData.records" stripe>
		   <el-table-column type="expand">
			   <template #default="scope">
				   <el-form label-width="100">
					   <el-form-item label="姓名">{{scope.row.name}}</el-form-item>
					   <el-form-item label="民族">{{scope.row.nation}}</el-form-item>
					   <el-form-item v-if="!scope.row.isHead" label="与户主关系">{{scope.row.relation}}</el-form-item>
					   <el-form-item label="是否享有医保">
						   <el-tag type="success" v-if="scope.row.insurance">是</el-tag>
						   <el-tag type="danger" v-else>否</el-tag>
					   </el-form-item>
					   <el-form-item label="是否享有低保">
						   <el-tag type="success" v-if="scope.row.basic">是</el-tag>
						   <el-tag type="danger" v-else>否</el-tag>
					   </el-form-item>
					   <el-form-item label="工作情况" prop="work">
					     <el-input type="textarea" :rows="4" maxlength="250" v-model="scope.row.work" :readonly="true"></el-input>
					   </el-form-item>
					   <el-form-item label="健康情况" prop="health">
					     <el-input type="textarea" :rows="4" maxlength="250" v-model="scope.row.health" readonly></el-input>
					   </el-form-item>
				   </el-form>
			   </template>
		   </el-table-column>
		   <el-table-column label="姓名" prop="name"></el-table-column>
		   <el-table-column label="身份证号" prop="idNumber" :show-overflow-tooltip="true"></el-table-column>
		   <el-table-column label="性别">
			   <template #default='scope'>
				   <span v-if="scope.row.sex === 1">男</span>
				   <span v-else>女</span>
			   </template>
		   </el-table-column>
		   <el-table-column label="是否户主">
			   <template #default='scope'>
				   <el-tag type="success" v-if="scope.row.isHead">是</el-tag>
				   <el-tag type="danger" v-else>否</el-tag>
			   </template>
		   </el-table-column>
		   <el-table-column width="250px">
			   <template #default="scope">
				   <el-button type="primary" plain size="small" :icon="Update" @click="update(scope.row.id)">修改</el-button>
				   <el-button v-if="!scope.row.isHead" type="danger" plain size="small" @click="del(scope.row.id)">删除</el-button>
				   <el-button v-if="!scope.row.isHead" type="success" plain size="small" @click="setHead(scope.row.id)">设为户主</el-button>
			   </template>
		   </el-table-column>
        </el-table>
        <el-dialog v-model="myDialog.show" :title="myDialog.title" :close-on-click-modal="false" width="830px">
        	 <MyAdd v-if="myDialog.show" v-model:show="myDialog.show" :id="myDialog.id" :fId="props.id" @getPoorData="getPoorData"/>
        </el-dialog>
   </div>
</template>
  
<script setup>
import url from './util'
import MyAdd from "./add"
import { ref,reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { get, post } from "@/axios";
import { ElMessage } from "element-plus";
import Update from '@/components/icons/update'
import { decryptText } from '@/util/AES'
const props = defineProps(['id'])
const myDialog = reactive({
	show: false,
	title: '',
	id: null
})
const poorData = reactive({
	records: []
})
function add () {
	myDialog.show = true
	myDialog.title = "添加家庭成员"
	myDialog.id = null
}
function update(id) {
	myDialog.show = true
	myDialog.title = "修改家庭成员"
	myDialog.id = id
}
function del(id) {
	ElMessageBox.confirm("一旦删除无法恢复，您确定要删除该家庭成员信息吗？",'警告',{
		type: 'warning'
	}).then(() => {
		post(url.del,{id},content => {
			getPoorData ()
		})
	}).catch(() => {})
}
function setHead( id ) {
	ElMessageBox.confirm("您确定要将该家庭成员变更为户主吗？",'提示',{
		type: 'info'
	}).then(() => {
		post("/poor/setHead",{fId:props.id,id},content => {
			getPoorData ()
		})
	}).catch(() => {})
}
function getPoorData () {
	get(url.list,{ fId:props.id },content => {
		poorData.records = content
	})
}
getPoorData()

</script>
  
<style scoped lang="scss">


</style>